<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
  
    <h:head>
       <!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
        <h:outputStylesheet name="css/cssProduct.css" />
        <h:outputStylesheet name="css/cssHome.css" />
        <h:outputStylesheet name="css/contact.css" />
        <!-- 2 <link type="text/css" rel="stylesheet" href="css/cssHome.css" />-->
        <!-- 3  <h:outputScript name="scripts/modernizr-1.5.min.js" /> -->
        <!--  <script type="text/javascript"
          src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>-->
        <!--  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
          <script type="text/javascript">
  
              $(document).ready(function() {
  
  
                  $(".slidingDiv").hide();
                  $(".show_hide").show();
  
                  $('.show_hide').click(function() {
                      $(".slidingDiv").slideToggle();
                  });
  
              });
  
          </script>-->
        <!--  <h:outputScript name="scripts/jquery.js" />-->
        <!--  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
       <script type="text/javascript" language="javascript">
           //<![CDATA[
           $(document).ready(function() {

               function initialize() {
                   var myLatlng = new google.maps.LatLng(21.023373, 105.843935);
                   var myOptions = {
                       zoom: 16,
                       center: myLatlng,
                       mapTypeId: google.maps.MapTypeId.ROADMAP
                   }

                   var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                   var contentString = '<div id="content">' +
                           '<h3>Elevation System</h3>' +
                           '<div>' +
                           '</div>' +
                           '</div>';

                   var infowindow = new google.maps.InfoWindow({
                       content: contentString,
                       maxWidth: 300
                   });

                   var marker = new google.maps.Marker({
                       position: myLatlng,
                       map: map,
                       title: 'Perth, Western Australia'
                   });
                   google.maps.event.addListener(marker, 'click', function() {
                       infowindow.open(map, marker);
                   });

               }
               // Function added to help reset map and container boundaries
               $("#showMap").click(function() {
                   $("#tab2").css({'display': 'block'});
                   $("#map_canvas").css({'width': '680px', 'height': '400px'});
                   initialize();
                   //alert('showMap Clicked!');
               });

               initialize();

           });
           //]]>
       </script>-->
        <!-- 1
                <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />-->
        <!--<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js" />-->

         <link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" />
        <!-- 3 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>-->
        <!-- 4 <h:outputScript name="scripts/jquery.easing-sooper.js" />-->
        <!-- 5 <h:outputScript name="scripts/jquery.sooperfish.js" /> -->
        <!-- <h:outputScript name="scripts/jquery.kwicks-1.5.1.js"  />   -->
        <!-- <h:outputScript name="scripts/jquery.kwicks-1.5.1.js" />  -->
        <!-- <h:outputStylesheet name="css/registration.css" /> -->
        <!-- <h:outputStylesheet name="css/user-dashboard.css" />-->
        <title>DHellas - Elevation Company </title>
    </h:head>
    <h:body class="wp"> 
        <div>
            <header>            
                <div class="banner" >
                    <div class="logo"></div>
                    <div class="contact-box" >
                        <strong class="phone">+123 456 78.90.000</strong>                       
                        <ul class="social">
                            <li><a href="#" class="twitter">twitter</a></li>
                            <li><a href="#" class="facebook">facebook</a></li>
                            <li><a href="#" class="google">google</a></li>
                            <li><a href="#" class="rss">rss</a></li>
                        </ul> 
                        <h:form id="frmWelcome" style=" margin-bottom:0px; margin-right: 5px">
                            <h:outputLabel id="welcomeLogin" style="color: red;" value="Welcome : #{loginController.userLogin.usUserName}" rendered="#{not empty loginController.userLogin}"/>
                            <a href="#{request.contextPath}/faces/Client/ClientTemplate.xhtml" ><h:commandLink action="#{loginController.logout}" value="Logout"  rendered="#{not empty loginController.userLogin}"/></a>                              
                            <a  href="#" onclick="dlgLogin.show();"><h:outputText id="liLogin" style="color: red;" value="LOGIN/SIGNUP" rendered="#{empty loginController.userLogin}" /></a>
                        </h:form>
                    </div>
                </div>

                <div class="menu">
                    <ul>
                        <li ><a href="#{request.contextPath}/faces/Client/index.xhtml">HOME</a></li>
                        <li  class="has-sub"><a href="#"> <span>ABOUT US</span></a>
                            <ul>
                                <li><a href="#"><span>INTRODUCTION</span></a></li>
                                <li><a href="#"><span>COMPANY NEWS</span></a></li>
                                <li><a href="#"><span>SUCCESS STORIES</span></a></li>
                                <li><a href="#"><span>EVENT</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub"><a href="#"><span>PROJECTS</span></a>
                            <ul>
                                <li><a href="#"><span>Đang làm</span></a></li>
                                <li><a href="#"><span>Hoàn thiện</span></a></li>

                            </ul>
                        </li>
                        <li><a href="#{request.contextPath}/faces/Client/CustomerOrder.xhtml"><span>ORDER</span></a></li>
                        <li><a href="#{request.contextPath}/faces/Client/ListElevation.xhtml"><span>ELEVATION</span></a></li>
                        <li><a href="#{request.contextPath}/faces/Client/Complaint.xhtml"><span>COMPLAINT</span></a></li>
                        <li><a href="#{request.contextPath}/faces/Client/Feedback.xhtml"><span>FEEDBACK</span></a></li>
                        <li><a href="#{request.contextPath}/faces/Client/ContactUs.xhtml"><span>CONTACT US</span></a></li>

                        <li class="has-sub" ><a href="#"><span rendered="#{not empty loginController.userLogin}">MY INFO</span></a>
                            <ul>
                                <li> <a href="#{request.contextPath}/faces/Client/UpdateInfor.xhtml" rendered="#{not empty loginController.userLogin}" >Update Information</a></li>
                                <li>  <a href="#{request.contextPath}/faces/Client/OrderHistory.xhtml" rendered="#{not empty loginController.userLogin}">History Order</a></li>

                            </ul>
                            
                            
                        </li>
                       	
                    </ul>
                </div>

            </header>
        </div>
        <div id="mainContent">
            <div class="container">                
                <ui:include src="LoginClient.xhtml" />   
            </div>
            <ui:insert name="body">
            </ui:insert>
        </div>  
        <!-- main Footer -->
        <div id="mainFooter">
            <div class="add-block">
                <div class="holder">
                    <nav class="add-nav">
                        <ul>
                            <li><a href="#{request.contextPath}/faces/Client/index.xhtml">Home</a></li>
                            <li><a href="#">Our News</a></li>
                            <li><a href="#">Projects</a></li>										
                            <li><a href="#">Our Customers</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </nav>
                    <div class="by">
                        &copy; Copyright 2013. <a href="#">D'Hellas</a>. All right reserved.
                    </div>
                </div>
            </div>
        </div>
        <!-- End main Footer -->
    </h:body>

</html>
